<!-- 配置车辆弹窗 -->
<template>
  <div>
    <div class="header">
      <div class="num">
        <label>司机编号：</label>
        <span>{{ carDriverInfo.userId || '' }}</span>
      </div>
      <div class="name">
        <label>司机名称：</label>
        <span>{{ carDriverInfo.name || '' }}</span>
      </div>
      <div class="carType">
        <label>司机电话：</label>
        <span>{{ carDriverInfo.mobile }}</span>
      </div>
      <div class="agency">
        <label>所属机构：</label>
        <span>{{ carDriverInfo.agency.name || '' }}</span>
      </div>
    </div>
    <div class="serchBox">
      <label>配置车辆：</label>
      <el-select
        v-model="selected"
        suffix-icon="el-icon-search"
        placeholder="请选择配置车辆"
        filterable
        @change="handleChange"
      >
        <el-option
          v-for="item in carsList"
          :key="item.id"
          :label="item.licensePlate"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <el-table
      :key="tableKey"
      ref="multipleTable"
      v-loading="loading"
      :data="dataList"
      style="width: 100%"
      stripe
      :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
    >
      <div
        v-show="(!dataList || dataList.length <= 0) && !loading"
        slot="empty"
      >
        <img
          src="../../../icons/pic-kong.png"
          alt="img"
          style="margin-top: 20px"
        />
        <p style="margin-top: -20px; padding-bottom: 0px">这里空空如也</p>
      </div>
      <el-table-column
        prop="licensePlate"
        label="车牌号"
        width="200"
      />
      <el-table-column
        align="left"
        label="车辆状态"
        prop="workStatus"
        :formatter="workStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        align="left"
        label="操作"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="handleVehicleDetail(scope.row.id)"
          >查看</el-link>
          <el-divider direction="vertical" />
          <el-link
            type="danger"
            :underline="false"
            @click="deleteDriver(scope.row.id)"
          >删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: center; padding-top: 30px; padding-bottom: 20px"
    >
      <el-button
        type="warning"
        style="width: 90px"
        class="save-btn"
        @click="confirm"
      >确认</el-button>
      <el-button
        plain
        style="width: 90px; color: #2a2929"
        class="cancel-btn"
        @click="dialogFormH"
      >取消</el-button>
    </div>
  </div>
</template>

<script>
import { driverArrangeCar, truckList } from '@/api/transit'

export default {
  name: 'CarConfig',
  props: {
    dialogVisible: {
      type: Boolean
    },
    carDriverInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableKey: 0,
      // form: {},
      dataList: [],
      carsList: [],
      selectCarInfo: {},
      selected: '',
      loading: false,
      params: {
        page: 1,
        pageSize: 20
      }
    }
  },
  mounted() {
    this.getCarList()
  },
  methods: {
    workStatusFormatter(row) {
      const MAP = {
        0: '停用',
        1: '启用'
      }
      return MAP[row.workStatus]
    },
    async getCarList() {
      // 获取已停用车辆列表
      const res = await truckList(this.params)
      const arr = res.data.items
      this.carsList = arr.filter(ele => ele.workStatus === 0)
    },
    // 删除选中司机
    deleteDriver(id) {
      this.dataList = this.dataList.filter((item) => item.id !== id)
      this.selected = ''
    },
    async confirm() {
      await driverArrangeCar({
        driverIds: [this.carDriverInfo.userId],
        truckId: this.dataList[0].id
      }).then((res) => {
        if (String(res.code) === '200') {
          this.$message.success('安排司机成功')
          this.$emit('newDataes')
          this.$emit('changeIsShowDialog', false)
          this.dataList = []
          this.selecteds = []
        } else {
          this.$message.error(res.msg)
          this.$emit('changeIsShowDialog', false)
        }
      })
    },
    // 跳转到车辆详情
    handleVehicleDetail(id) {
      this.$router.push({
        path: 'vehicle-detail',
        query: { id: id }
      })
    },
    // 改变时触发
    handleChange(value) {
      const that = this
      console.log('value', value)
      this.selected = value
      console.log('select', this.selected)

      const arr = []
      arr.push(...that.carsList.filter(ele => ele.id === that.selected))
      console.log(arr)
      this.dataList = arr
    },
    // 弹层隐藏
    dialogFormH() {
      this.$emit('changeIsShowDialog', false)
      this.dataList = []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .small-padding {
  .cell {
    text-align: left !important
  }
}

.serchBox {
  .el-select {
    width: 300px;
  }

  text-align: left;
  margin-bottom: 20px;
}

.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 131px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  text-align: left;

  .el-input {
    width: 240px;
  }

  div {
    flex: 40%;
  }

  .num,
  .iphone {
    flex: 60%;
  }

  label {
    color: #20232a;
    font-size: 14px;
    font-weight: normal;
  }

  span {
    color: #818693;
    font-size: 14px;
  }

  .carType {
    flex: 60%;

    span {
      display: inline-block;
      text-align: center;
      line-height: 20px;
      height: 20px;
      border-radius: 13.5px;
      color: #818693;
      font-size: 14px;
    }

    .use {
      background: #37c608;
    }

    .noUse {
      background: #808694;
    }
  }
}

.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}

.selected-driver {
  margin-top: 18px;
}

::v-deep .el-table {
  overflow: initial;

  .el-table__body-wrapper {
    overflow: initial;

    .cell {
      overflow: initial;
    }
  }
}</style>

